<template>
    <div class="pss-main-update-per">
        <div class="pss-main-body" @click.stop="closePop"></div>
        <div class="pss-main-pop">
            <div class="pss-pop-top">
                <h3>修改人员信息</h3>
                <i class="el-icon-error" style="color: #FF524A;position:absolute;right: 20px;font-size: 20px" @click="closePop"></i>
            </div>
            <div>
                <div class="associates-box">
                    <el-tree
                        ref="personTree"
                        :data="personData"
                        :props="defaultProps"
                        show-checkbox
                        node-key="objectId"
                        @check-change="handleCheckChange">
                    </el-tree>
                </div>
                <el-form ref="form2"  class="pss-plan-form" style="text-align: center">
                    <el-form-item>
                        <el-button type="primary" @click="submit" size="mini">确定</el-button>
                        <el-button size="mini" @click="closePop">取消</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    props:['updatePerson','updatePersonPlanId'],
    data(){
        return{
            personData: [],
            defaultProps: {
                children: 'childList',
                label: 'objectName'
            },
            selectPerList:[],
        }
    },
    methods:{
        handleCheckChange(){},
        dealInfo(){},
        qryGroupAndMemberByUserId(){
            let param = {
                locatePlanId:this.updatePersonPlanId
            }
            this.$http.post('/lbs/usercenter/group/qryGroupAndMemberByUserId',param).then(res => {
                if(res.data.retCode == '0'){
                    console.log(res.data.data)
                    this.personData = res.data.data.groupList;
                    this.selectPerList = res.data.data.selectIdList;
                    this.$refs.personTree.setCheckedKeys(res.data.data.selectIdList);
                }else{
                    this.$message({
                        message: res.data.retMsg,
                        type: 'error'
                    });
                }
            })
        },
        closePop(){
            this.$emit("emClosePop");
            this.personData = [];
        },
        submit(){
            let adminGroupIds = this.$refs.personTree.getCheckedNodes();
            adminGroupIds = adminGroupIds.filter(item => {
                return item.objectType = '2';
            })
            let adminGroupIdsKey = adminGroupIds.map(item => {
                return item.objectId;
            })
            let newSet = [...new Set(adminGroupIdsKey)];
            let param = {
                relPersonIds:JSON.stringify(newSet),
                planId:this.updatePersonPlanId
            }
            if (adminGroupIdsKey.toString() == this.selectPerList.toString()){
                this.$message({
                    message: '未作修改，请勿提交',
                    type: 'warning'
                });
                return;
            }
            this.$http.post('/lbs/locatepeople/locatePlan/updatePlanRelPerson',param).then(res => {
                if(res.data.retCode == '0'){
                    this.$message({
                        message: res.data.retMsg,
                        type: 'success'
                    });
                }else{
                    this.$message({
                        message: res.data.retMsg,
                        type: 'error'
                    });
                }
            })
        }
    },
    watch:{
        updatePerson(val){
            if (val){
                this.qryGroupAndMemberByUserId();
            }
        }
    }
}
</script>

<style lang="less" scoped>
.pss-main-update-per{
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
}
.pss-main-body{
    width: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
    background:#000000;
    opacity: 15%;
    z-index: 99;
}
.pss-main-pop{
    width: auto;
    height: auto;
    width: 700px;
    border-radius: 15px;
    background:#fff;
    z-index: 100;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}
.associates-box{
    height: 300px;
    width: 500px;
    margin: 20px 90px;
    background: #f7f7f7;
    overflow: auto;
    padding: 25px;
    box-sizing: border-box;
}
.pss-pop-top{
    width: 100%;
    height: 60px;
    background: #F9F9F9;
    z-index: 101;
    border-radius: 15px 15px 0 0;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}
</style>
<style lang="less">
.pss-main-update-per {
    .el-input__inner {
        height: 24px;
        line-height: 24px;
    }
    .el-input {
        width: auto;
    }
    .pss-demonstration{
        font-size: 14px;
        color: #606266;
    }
    .el-date-editor .el-range__icon{
        line-height: 16px;
    }
    .el-date-editor .el-range-input, .el-date-editor .el-range-separator{
        font-size: 12px;
    }
    .el-date-editor .el-range-separator{
        line-height: 16px;
    }
    .el-date-editor .el-range__close-icon{
        line-height: 16px;
    }
    .el-date-editor--daterange.el-input, .el-date-editor--daterange.el-input__inner, .el-date-editor--timerange.el-input, .el-date-editor--timerange.el-input__inner{
        width: 220px;
    }
    .el-form-item{
        margin-bottom: 0;
    }
    .el-radio-button__inner{
        padding: 2px 5px;
        font-size: 12px;
    }
    .el-checkbox{
        margin-right: 15px;
    }
    .el-tree{
        background: none;
    }
}
.pss-plan-form-active{
    .el-form-item__content{
        line-height: 25px;
    }
}
.el-table::before{
    height: 0;
}
</style>
